
{extend name='../../admin/view/table'}

{block name="button"}
<button data-modal='{:url("add")}' data-offset="20" data-title="添加设备" class='layui-btn layui-btn-sm layui-btn-primary'>添加设备</button>
<!--{if auth("sync")}-->
<button data-queue='{:url("sync")}' data-table-id="deviceData" data-confirm="确定要创建同步设备数据的后台任务？" class='layui-btn layui-btn-sm layui-btn-primary'>同步数据</button>
<!--{/if}-->
{/block}
{block name="content"}
<div class="think-box-shadow">
    <div class="think-box-notify margin-bottom-15">
        如需批量添加设备,请登录阿里云物联网平台操作,系统会自动同步数据
    </div>
    <table id="deviceData" data-url="{:sysuri()}" data-target-search="form.form-search"></table>
</div>
{/block}
{block name='script'}
<script>
    $(function () {
        $('#deviceData').layTable({
            even: true, height: 'full',
            toolbar: '#toolbarDemo',
            sort: {field: 'create_at desc', type: 'desc'},
            cols: [[
                {checkbox: true},
                {field: 'nickname', title: '设备昵称', width: 80},
                {field: 'deviceName', title: '设备名称', width: 180},
                {field: 'deviceSecret', title: '设备秘钥'},
                {field: 'iotId', title: '设备ID'},
                {field: 'productKey', title: '产品KEY'},
                {field:'status', width:90 ,align: 'center',title: '状态', templet: function(d){
                        if(d.status === 1){
                            return '<span class="layui-badge layui-bg-green">在线中</span>';
                        } else if(d.status === 0){
                            return '<span class="layui-badge">已离线</span>';
                        }else if(d.status === -1){
                            return '<span class="layui-badge">未激活</span>';
                        }else{
                            return '<span class="layui-badge layui-bg-black">已禁用</span>';
                        }
                    }
                },
                //<span class="layui-badge-dot layui-bg-green"></span>
                {field: 'create_at', title: '创建时间',align: 'center'},
                {toolbar: '#toolbar', title: '操作面板', align: 'center',maxWidth: 200, fixed: 'right'}
            ]],
        });
        // 工具栏事件
        var table = layui.table;
        table.on('toolbar(deviceData)', function(obj){
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    var ids = data.map(o => o.id)
                    layer.alert(layui.util.escape(JSON.stringify(ids)));
                    break;
                case 'getData':
                    var getData = table.getData(id);
                    layer.alert(layui.util.escape(JSON.stringify(getData)));
                    break;
                case 'refreshData':
                    // 数据重载 - 参数重置
                    table.reloadData('deviceData');
                    break;
                case 'LAYTABLE_TIPS':
                    layer.alert('自定义工具栏图标按钮');
                    break;
            };
        });
    });

</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
<!--        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
<!--        <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="refreshData">刷新数据</button>
    </div>
</script>
<script type="text/html" id="toolbar">
    <a data-action='{:url("remove")}' data-value="iotId#{{d.iotId}}" data-confirm="确认要删除这条记录吗？" class="layui-btn layui-btn-sm layui-btn-danger">删 除</a>
</script>
{/block}